<!--
 @description 订单查询列表
 @fileName index.vue
 @author zengqiongying
 @created 2022/07/27 15:29:51
-->
<template>
  <div class="mine-container">
    <MineHeader arrow title="订单搜索结果" />
    <div class="order-head">
      <SearchInput v-model="searchValue" :search-type="searchType" @search="handleSearch" @clear="handleClearSearch" />
    </div>
    <div>
      <List
        ref="list"
        class="order-list"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
      >
        <Item
          v-for="(item,i) in list"
          :key="i"
          :o-data="item"
          :dict-data="dictData"
        />
      </List>
    </div>
  </div>
</template>

<script>
import SearchInput from './components/SearchInput'
import List from '@/components/PageList'
import Item from './components/OrderItem'
import { getDictByType } from '@/apis/dataDict'
import { getOrderList } from '@/apis/order'

export default {
  name: 'OrderSearch',
  components: {
    SearchInput, List, Item
  },
  data() {
    return {
      searchType: this.$route.query.searchType || 'code',
      searchValue: this.$route.query.searchVal || '',
      dictData: {},
      list: [],
      finished: false // 列表是否加载完成
    }
  },

  computed: {},

  created() {
    this.getDictList()
  },
  activated() {},

  mounted() {},

  methods: {
    async getDictList() {
      const appCode = 'retail'
      const sourceList = await getDictByType({ appCode, dictTypeCode: 'ORDER_SOURCE' })
      const statusList = await getDictByType({ appCode, dictTypeCode: 'STATUS' })
      const paymentStateList = [
        { dictCode: '01', dictName: '未结清' },
        { dictCode: '02', dictName: '已结清' }
      ]
      this.dictData = {
        'ORDER_SOURCE': sourceList,
        'STATUS': statusList,
        'PAYMENT_STATUS': paymentStateList
      }
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, pageSize) {
      const filtersRaw = []
      if (this.searchValue) {
        filtersRaw.push({
          id: this.searchType === 'code' ? 'retailOrderCode' : 'consumerName',
          property: this.searchType === 'code' ? 'retailOrderCode' : 'consumerName',
          operator: this.searchType === 'code' ? '=' : 'like',
          value: this.searchValue
        })
      }
      const data = {
        page,
        rows: pageSize,
        filtersRaw
      }
      return getOrderList(data).then(res => {
        const records = res.data.records || []
        this.list.push(...records)
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    handleSearch(data) {
      const { type, value } = data
      if (value === '') {
        this.$toast(`请输入${type === 'code' ? '零售单号' : '顾客姓名'}`)
        return
      }
      this.searchType = type
      this.searchValue = value

      this.resetPageData()
    },
    handleClearSearch() {

    }
  }
}

</script>
<style lang='less' scoped>
.order-head{
  position: fixed;
  left: 0;
  right: 0;
  top: 44PX;
  z-index: 99;
  padding: 18px 16px 12px;
  background:#F5F6F7;
}
.order-list{
  padding-top: 82px; // 52px + 30px
  padding-left: 16px;
  padding-right: 16px;
  min-height:calc(100vh - 44PX);
  box-sizing: border-box;
}

</style>
